import React, { Component } from 'react';
import {Card, Tabs, Icon, message} from 'antd';
class tabs extends Component {
    newTabIndex = 0
    componentWillMount() {
        const panes = [
            {
                title: 'Tab1', 
                content: 'React是一门MV*框架',
                key: '1'
            },
            {
                title: 'Tab2', 
                content: 'React是一门MV*框架',
                key: '2'
            },
            {
                title: 'Tab3', 
                content: '我正在学习React高级课程',
                key: '3'
            }
        ]
        this.setState({
            panes,
            activeKey: panes[0].key
        })
    }
    onEdit = (targetKey, action) => {
        this[action](targetKey);
    }
    callback = (key) => {
        message.info('Hi, 您选择了页签'+ key);
    }
    handleChange = (activeKey) => {
        this.setState({
            activeKey
        })
    }
    add = () => {
        const panes = this.state.panes;
        const activeKey = `newTab${this.newTabIndex++}`;
        panes.push({ title: activeKey, content: 'Content of new Tab', key: activeKey });
        this.setState({ panes, activeKey });
    }

    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
            activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
    }
    render() {
        return (
            <div>
                <Card title="Tab页签">
                    <Tabs defaultActiveKey="1" onChange={this.callback}>
                        <Tabs.TabPane tab={<span><Icon type="apple"/>Tab 1</span>} key="1">内容区域1</Tabs.TabPane>
                        <Tabs.TabPane tab={<span><Icon type="android"/>Tab 2</span>} disabled key="2">内容区域2</Tabs.TabPane>
                        <Tabs.TabPane tab="Tab 3" key="3">内容区域3</Tabs.TabPane>
                    </Tabs>
                </Card>
                <Card title="tabs卡片样式带有关闭选项">
                    <Tabs defaultActiveKey="1" onChange={this.callback}>
                        <Tabs.TabPane tab={<span><Icon type="apple"/>Tab 1</span>} key="1">内容区域1</Tabs.TabPane>
                        <Tabs.TabPane tab={<span><Icon type="android"/>Tab 2</span>} disabled key="2">内容区域2</Tabs.TabPane>
                        <Tabs.TabPane tab="Tab 3" key="3">内容区域3</Tabs.TabPane>
                    </Tabs>
                </Card>
                <Card title="可编辑的Tab页签">
                    <Tabs 
                        activeKey={this.state.activeKey}
                        onChange={this.handleChange} 
                        type="editable-card"
                        onEdit={this.onEdit}>
                        {this.state.panes.map((panel) => {
                            return <Tabs.TabPane tab={panel.title} key={panel.key}>{panel.content}</Tabs.TabPane>
                        })}
                    </Tabs>
                </Card>
            </div>
        );
    }
}

export default tabs;